<template>
	<link rel="stylesheet" type="text/css" media="print" href="/css/print-lock.css">
	<el-container>
		<el-header>
			<div class="left-panel">
				选择客户：<el-select style="width: 160px;" v-model="company_id" @change="companyChange">
					<el-option v-for="(item, index) in companyOptions" :key="index" :label="item.company_name" :value="item.id"></el-option>
				</el-select>
				选择品牌：<el-select style="width: 160px;" v-model="company_sign_id" @change="signChange">
					<el-option v-for="(item, index) in signOptions" :key="index" :label="item.company_sign" :value="item.id"></el-option>
				</el-select>
				选择产品：<el-select style="width: 260px;" v-model="goods_id" @change="goodsChange" filterable>
					<el-option v-for="(item, index) in goodsOptions" :key="index" :label="goodsDesc(item)" :value="item.id"></el-option>
				</el-select>
				规格：<el-select style="width: 160px;" v-model="price_id" filterable>
					<el-option v-for="(item, index) in skuOptions" :key="index" :label="skuDesc(item)" :value="item.price_id"></el-option>
				</el-select>
				
			</div>
		</el-header>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="addPrint">加一张</el-button>
				<el-button type="success" icon="el-icon-printer" @click="print">打 印</el-button>
			</div>
		</el-header>
		<el-main>
			<el-card v-for="(item, index) in printPiece" :key="index">
				<el-row>
					<el-col class="font20" :span="6">
						<el-button type="danger" @click="delPrint(index)" icon="el-icon-delete"></el-button>
						{{item.company_name}} / {{item.company_sign_name}}
					</el-col>
					<el-col class="font20" :span="10">{{item.goods_number}} / {{item.goods_desc}}</el-col>
					<el-col class="font20" :span="4">{{item.color}} - {{item.size}}</el-col>
					<el-col :span="4"><el-input type="number" v-model="item.number"></el-input></el-col>
				</el-row>
			</el-card>
		</el-main>
	</el-container>
</template>

<script>
	import { hiprint } from "vue-plugin-hiprint";
	export default {
		name: 'stockprint',
		data() {
			return {
				companyOptions: [],
				signes: [],
				signOptions: [],
				goodsOptions: [],
				skuOptions: [],
				company_id: '',
				goods_id: '',
				price_id: '',
				company_sign_id: '',
				printPiece: [],

			}
		},
		mounted() {
			this.getCompany()
		},
		methods: {
			async getCompany() {
				var res = await this.$API.company.get.get()
				if (res.code == 200) {
					this.companyOptions = res.data
					this.signes = res.signes
				}
			},
			async companyChange() {
				// console.log(e)
				this.goodsOptions = []
				this.skuOptions = []
				this.signOptions = []
				this.company_sign_id = ''
				this.goods_id = ''
				this.price_id = ''
				this.signOptions = this.signes.filter(item => item.company_id === this.company_id)
				
			},
			async signChange() {
				this.goods_id = ''
				this.price_id = ''
				var res  = await this.$API.goods.get.get({company_sign_id: this.company_sign_id})
				if (res.code == 200) {
					this.goodsOptions = res.data
				}
			},
			async goodsChange() {
				this.price_id = ''
				this.skuOptions = []
				var res = await this.$API.goods.priceGet.get({goods_id: this.goods_id})
				if (res.code == 200) {
					this.skuOptions = res.data
				}
			},
			goodsDesc(item) {
				return item.goods_number + ' | ' + item.goods_desc
			},
			skuDesc(item) {
				return item.color + '-' + item.size
			},
			addPrint() {
				var selectedCompany = this.companyOptions.find(item => item.id === this.company_id)
				var selectedSign = this.signOptions.find(item => item.id === this.company_sign_id)
				var selectedGoods = this.goodsOptions.find(item => item.id === this.goods_id)
				var selectedSku = this.skuOptions.find(item => item.price_id === this.price_id)

				if (!selectedCompany || !selectedGoods || !selectedSku || !selectedSign) {
					this.$message.error('请先完成选择')
				}
				var print_piece = {
					company_name : selectedGoods.company_name,
					company_sign_name: selectedGoods.company_sign,
					size: selectedSku.size,
					color: selectedSku.color,
					goods_number: selectedGoods.goods_number,
					goods_desc: selectedGoods.goods_desc,
					number: selectedGoods.num,
					price_id : selectedSku.price_id
					// barcode: selectedGoods.goods_number + '=' + selectedSku.price_id + '=' + selectedGoods.num,
				}
				this.printPiece.push(print_piece)
			},
			delPrint(index) {
				this.printPiece.splice(index, 1)
			},
			async print() {
				console.log(this.printPiece)
				var confirmRes = await this.$confirm(`确定打印吗？`, '提示', {
					type: 'warning',
					confirmButtonText: '打印',
					confirmButtonClass: 'el-button--primary'
				}).catch(() => {})

				if(!confirmRes){
					return false
				}

				for (var i = this.printPiece.length - 1; i >= 0; i--) {
					var item = this.printPiece[i]
					this.printPiece[i].barcode = item.goods_number + '=' + item.price_id + '=' + item.num
				}

				var res = await this.$API.printTmp.get.get({type: 'stock'});
				var print_json = res.data.json_data
				var hiprintTemplate = new hiprint.PrintTemplate({
				    template: JSON.parse(print_json)
				});
				hiprintTemplate.print2(this.printPiece)
				this.printPiece = [];
			}

		}
	}

</script>
<style type="text/css">
	.font20 {
		font-size: 20px;
	}
</style>